<!-- 赛事板块界面 -->
<template>
  <div
    class="
      venue-display
      flex flex-direction
      strut-absolute
      padding-top-xl padding-lr-xl padding-bottom-xs
    "
    style="overflow-y: scroll; overflow-x: hidden; height: 100%"
  >
  <el-button type="primary"
  style="width: 10%;" @click="openDialog">
  添加赛事板块
      </el-button>
      <br>
    <el-table 
    border
    :data="data"
    stripe
    style="width: 100%;"
    >
      <el-table-column align="center"
      label="赛事板块名称"
      >
      <template slot-scope="scope">
        <span class="spanText"
             @dblclick="openDialog(scope.row.id, scope.row.name)">
          {{scope.row.name}}
        </span>
      </template>
    </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" 
      @click="deleteContestSpecies(scope.row.id)"
      >
      删除
      </el-button>
      <!-- <el-button type="primary" icon="el-icon-edit" >
      </el-button> -->
        </template>
    </el-table-column>
    </el-table>

    <el-dialog
    style="width: 50%;margin-left: 30%;"
    :visible.sync="dialogVisible">
    <el-form label-width="70px">
      <el-form-item label="赛事名称">
        <el-input v-model="contestSpeciesName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
        style="width: 40%;"
        @click.native.prevent="cancelDialog"
        >取 消</el-button
      >
        <el-button
        type="primary"
        style="width: 40%; margin-left: 20%;"
        @click.native.prevent="editContestSpecies"
        >确 定</el-button
      >
      </el-form-item>
    </el-form>
    </el-dialog>

    <el-dialog
    style="width: 50%;margin-left: 30%;"
    :visible.sync="dialogVisible">
    <el-form label-width="70px">
      <el-form-item label="赛事名称">
        <el-input v-model="contestSpeciesName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
        style="width: 40%;"
        @click.native.prevent="cancelDialog"
        >取 消</el-button
      >
        <el-button
        type="primary"
        style="width: 40%; margin-left: 20%;"
        @click.native.prevent="addContestSpecies"
        >确 定</el-button
      >
      </el-form-item>
    </el-form>
    </el-dialog>
    
  </div>
</template>

<script>
import {getContestSpeciesList,addContestSpecies,deleteContestSpecies,editContestSpecies} from '@/api/eventSection'
export default {
  data() {
    return {
      data: [],
      contestSpeciesName: '',
      contestSpeciesId:'',
      dialogVisible: false,
    }
  },

  mounted() {
    this.getContestSpeciesList()
  },
  methods: {
    editContestSpecies(){
      const params = {
        id:this.contestSpeciesId,
        name:this.contestSpeciesName
      }
      editContestSpecies(params).then(res => {
        if(res.data.code === 200){
          this.$message({
            message:res.data.msg,
            type:'success'
          })
          this.dialogVisible = false
          this.getContestSpeciesList()
        }else{
          this.$message({
            message:res.data.msg,
            type:'error'
          })
        }
      })
    },
    openDialog(id, contestSpeciesName){
      this.contestSpeciesId = id
      this.contestSpeciesName = contestSpeciesName
      this.dialogVisible = true
    },
    cancelDialog(){
      this.dialogVisible = false
    },
    getContestSpeciesList() {
      getContestSpeciesList().then(res => {
        if(res.data.code === 200){
          this.data = res.data.data
        }else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }
      })
    },
    addContestSpecies() {
      const param = {contestSpeciesName : this.contestSpeciesName}
      addContestSpecies(param).then(res => {
        if(res.data.code === 200){
          this.$message({
            message: res.data.msg,
            type:'success'
          })
          this.dialogVisible = false
          this.getContestSpeciesList()
        }else{
          this.$message({
            message: res.data.msg,
            type:'error'
          })
        }
      })
    },
    deleteContestSpecies(id){
      const contestSpeciesId = {contestSpeciesId : id}
      deleteContestSpecies(contestSpeciesId).then(res => {
        if(res.data.code === 200){
          this.$message({
            message: res.data.msg,
            type:'success'
          })
          this.getContestSpeciesList()
        }else{
          this.$message({
            message: res.data.msg,
            type:'error'
          })
        }
      })
    }
  },

  destroyed() {
    // clearInterval(this.timer)
  },
  components: {
  }
}
</script>
<style scoped>
::v-deep .spanText{
  justify-content: center;
    border: 1px solid rgba(255, 187, 187, 0.733);
    width: 40%;
    height: 50px;
    display: inline-flex;
    font-weight: 600;
    font-size: larger;
    align-items: center;
}
</style>
